import { Badge, Descriptions, Modal, Image, Tag, message, Tooltip, Pagination, Table, Skeleton } from 'antd';
import "../../index.css"
import { useEffect, useState } from 'react';
import { BanGoods, GetGoodsOrderDetails, GetInventorys, GetSingleGoods, ShelveGoods } from '../../api/goods';
import { useNavigate, useParams } from 'react-router-dom';
import dayjs from 'dayjs';
import { GetOrderDetails, GetSupplierGoods, GetSupplierStatistics } from '../../api/supplier';
import { GetSupplierOrderDetails } from '../../api/home';
import { GetMerchantOrderDetails, GetMerchantStatistics, getMerchantOrders, getSingleMerchant } from '../../api/merchant';

//商户详情页面
const MerechantDetail = () => {
    document.info = [
        {
            title: "商户详情",
            url: "/merchant/detail",
        },
        {
            title: "商户管理-主页",
            url: "/merchant",
        }
    ]
    //详情数据
    const [detail, setDetail] = useState({
    });

    //描述列表
    const items = [
        {
            key: '1',
            label: '商户名',
            children: <Tag color='blue' bordered={false} className='primary-tag'>
                {detail.name}
            </Tag>
        },
        {
            key: '2',
            label: '账号',
            children: <Tag color='blue' bordered={false} className='primary-tag'>
                {detail.account}
            </Tag>
        },
        {
            key: '3',
            label: '激活',
            children: detail.isActive == 1 ?
                <Tag color='green' className='success-tag' bordered={false}>是</Tag> :
                <Tag color='red' className='danger-tag' bordered={false}>否</Tag>
        },
        {
            key: '4',
            label: '禁用',
            children: detail.isBan == 1 ?
                <Tag color='red' className='danger-tag' bordered={false}>是</Tag> :
                <Tag color='green' className='success-tag' bordered={false}>否</Tag>
        },
        {
            key: '5',
            label: '订单数',
            children: <Tag color='blue' bordered={false} className='primary-tag'>{detail.orderCount}</Tag>
        },
        {
            key: '6',
            label: '已完成订单',
            children: <Tag color='blue' bordered={false} className='primary-tag'>{detail.completeOrderCount}</Tag>
        },
        {
            key: '7',
            label: '已取消订单',
            children: <Tag color='blue' bordered={false} className='primary-tag'>{detail.cancelOrderCount}</Tag>
        },
        {
            key: '8',
            label: '购买商品总数量',
            children: <Tag color='blue' bordered={false} className='primary-tag'>{detail.buyCount}</Tag>
        },
        {
            key: '9',
            label: '成交金额',
            children: <Tag color='red' className='danger-tag' bordered={false}>￥ {detail.currMoney}</Tag>
        },
        {
            key: '10',
            label: '订单总金额',
            children: <Tag color='red' className='danger-tag' bordered={false}>￥ {detail.money}</Tag>

        },
        {
            key: '11',
            label: '取消金额',
            children: <Tag color='red' className='danger-tag' bordered={false}>￥ 2017</Tag>

        },
        {
            key: '12',
            label: '添加时间',
            children: <Tag color='blue' bordered={false} className='primary-tag'>{detail.time}</Tag>,
            span: 1
        }
    ]


    //详情模态框
    const [open_a, setOpen_a] = useState(false);
    const [orderSonTable, setOrderSonTable] = useState([]); //详情弹框表格数据

    //获取销售数据详情
    const [goodsOrder, setGoodsOrder] = useState({
        page: 1,
        limit: 10,
        total: 0,
        data: [],
        loading: false,
    });

    //获取库存数据
    const [inventorys, setInventorys] = useState({
        page: 1,
        limit: 10,
        total: 0,
        data: [],
        loading: false,
    });

    //获取路径id
    const { id } = useParams();

    const navigate = useNavigate();
    //骨架屏
    const [isFirst, setFirst] = useState(true);
    //详情的加载
    const [load, setLoad] = useState({
        loading: false,
        isFirst: true,
    });

    // 销售数据详情
    const columns_goodsOrder = [
        {
            title: '序号',
            dataIndex: 'Index',
            key: 'Index',
            width: 50,
        },
        {
            title: '详情',
            dataIndex: 'id',
            key: 'id',
            ellipsis: {
                showTitle: false,
            },
            with: 80,
            render: (text) => (<Tooltip placement="topLeft" title={text}>{text}</Tooltip>),

        },
        {
            title: '供应商',
            dataIndex: 'supplier',
            key: 'supplier',
            width: 180,
            ellipsis: {
                showTitle: false,
            },
            render: (text) => <Tooltip placement="topLeft" title={text}><Tag color='blue' bordered={false} className='primary-tag'>{text}</Tag></Tooltip>

        },
        {
            title: '商户',
            dataIndex: 'merchant',
            key: 'merchant',
            // with:50,
            ellipsis: {
                showTitle: false,
            },
            render: (text) => <Tooltip placement="topLeft" title={text}>{text}</Tooltip>

        },

        {
            title: '商品',
            dataIndex: 'goodsNames',
            key: 'goodsNames',
            ellipsis: {
                showTitle: false,
            },
            width: 120,
            render: (text) => <Tooltip placement="topLeft" title={text}>{text}</Tooltip>
        },
        {
            title: '数量',
            dataIndex: 'goodsCount',
            key: 'goodsCount',
            width: 60,
        },
        {
            title: '金额',
            dataIndex: 'money',
            key: 'money',
            ellipsis: {
                showTitle: false,
            },
            width: 90,
            render: (text) => <Tooltip placement="topLeft" title={text}>
                <Tag color='red' bordered={false} className='danger-tag'>￥ {text}</Tag>
            </Tooltip>
        },
        {
            title: '时间',
            dataIndex: 'time',
            key: 'time',
            // with:50,
            ellipsis: {
                showTitle: false,
            },
            render: (text) => <Tooltip placement="topLeft" title={text}>{text}</Tooltip>
        },
        {
            title: '操作',
            dataIndex: '',
            key: '',
            width: 185,
            fixed: "right",
            render: (text, hang) => (
                <div style={{ width: 185 }}>
                    <div style={{ marginLeft: "5px" }} className="primary-cell btn" size="small" onClick={() => { supplierDetail(hang.id) }}>详情</div>
                </div>
            )
        },

    ];

    // 订单详情
    const columns_orderSon = [
        {
            title: '序号',
            dataIndex: 'Index',
            key: 'Index',
            with: 20

        },
        {
            title: '图片',
            dataIndex: 'photo',
            key: 'photo',
            render: (text) => <img style={{ width: 60, borderRadius: 5 }} src={text}></img>

        },
        {
            title: '商品名称',
            dataIndex: 'goodsName',
            key: 'goodsName'
        },
        {
            title: '类型',
            dataIndex: 'goodsType',
            key: 'goodsType',
            render: (text) => {
                return <div>{text === "" || text === null ? "其他" : text}</div>
            }
        },

        {
            title: '供应商',
            dataIndex: 'merchant',
            key: 'merchant',
            ellipsis: {
                showTitle: false,
            },
            width: 120,
            render: (text) => (
                <Tooltip placement="topLeft" title={text}>
                    <Tag color='blue' bordered={false} className='primary-tag'>{text}</Tag>
                </Tooltip>
            )

        },
        {
            title: '单价',
            dataIndex: 'price',
            key: 'price',
            ellipsis: {
                showTitle: false,
            },
            width: 120,
            render: (text) => <Tooltip placement="topLeft" title={text}>
                <Tag color='blue' bordered={false} className='primary-tag'>￥ {text}</Tag>
            </Tooltip>
        },
        {
            title: '数量',
            dataIndex: 'number',
            key: 'number',
            render: (text) => <Tag color='blue' bordered={false} className='primary-tag'>{text}</Tag>
        },

        {
            title: '小计',
            dataIndex: 'money',
            key: 'money',
            ellipsis: {
                showTitle: false,
            },
            width: 120,
            render: (text) => <Tooltip placement="topLeft" title={text}>
                <Tag color='red' bordered={false} className='danger-tag'>￥ {text}</Tag>
            </Tooltip>
        },

    ];


    //获取销售数据的单个详情
    const getOrderDetails = async (props) => {
        const res = await GetOrderDetails({ id: props });
        if (res?.result !== 0) {
            message.error("数据有误");
        }
        res.data?.map((d, i) => { return d.Index = i + 1 });
        setOrderSonTable(res.data);
        setTimeout(() => {
            setLoad((load) => ({ ...load, isFirst: false }));
        }, 500);
    }



    //供应商详情按钮
    const supplierDetail = (props) => {
        setLoad((load) => ({ ...load, isFirst: true }));
        setOpen_a(true);
        getOrderDetails(props);
    }




   
    const getMerchantStatistics = async () => {
        const res = await getSingleMerchant({ id: id });
        if (res?.result === 0) {
            setDetail(res.data);
            return true
        } else {
            message.error(res?.message);
            return false
        }

    }


    //获取订单列表表格数据
    const getMerchantOrderDetails = async () => {
        const res = await getMerchantOrders({
            id: id,
            page: goodsOrder.page,
            limit: goodsOrder.limit
        });

        if (res?.result === 0) {
            res.data.data.map((d, i) => (d.Index = i + 1));
            setGoodsOrder((goodsOrder) => ({ ...goodsOrder, data: res.data.data, total: res.data.total, loading: false }));
            return true
        } else {
            message.error(res?.message);
            setGoodsOrder((goodsOrder) => ({ ...goodsOrder, loading: false }));
            return false
        }
    }


    //初始数据渲染
    useEffect(() => {
        const closeFirst = async () => {
            Promise.allSettled([
                getMerchantStatistics(),
                getMerchantOrderDetails()
            ]).then((res) => {
                if (res.map((d) => d.status === "fulfilled")) {
                    setFirst(false);
                } else {
                    message.error("数据错误")
                }
            })

        }
        closeFirst();
    }, []);




    //监听销售订单数据
    useEffect(() => {
        setGoodsOrder((goodsOrder) => ({ ...goodsOrder, loading: true }));
        getMerchantOrderDetails();
    }, [goodsOrder.page, goodsOrder.limit, goodsOrder.total]);




    //销售订单分页方法
    const ordersPageChange = (value) => {
        setGoodsOrder((goodsOrder) => ({ ...goodsOrder, page: value }))
    }


    return (
        <div className="Containers good_detailIndex " style={{ padding: 0 }}>
            <Skeleton active loading={isFirst} paragraph={{ rows: 15 }}>
                <div className='pds'>
                    <Descriptions title="供应商详情" layout="vertical" column={4}  bordered items={items} />
                </div>

                <div className='data_title'>
                    <div className='data_title_left'>
                        <div className='data_title_name goodOrder-title'>
                            销售订单
                        </div>
                    </div>

                    <div className='data_title_right'>


                    </div>

                </div>

                <div className='pds'>
                    <Table dataSource={goodsOrder.data} columns={columns_goodsOrder} bordered pagination={false} loading={goodsOrder.loading}
                        style={{ marginTop: "5px" }}
                        scroll={{


                        }}
                    />


                    <div className="page-layout">
                        <Pagination defaultCurrent={1} total={goodsOrder.total} onChange={(value) => { ordersPageChange(value) }} />
                    </div>

                    {/* 详情模态框 */}
                    <Modal
                        title="订单详情"
                        okButtonProps={false}
                        open={open_a}
                        onOk={() => { setOpen_a(false); setOrderSonTable([]) }}
                        onCancel={() => { setOpen_a(false); setOrderSonTable([]) }}
                        width={1200}
                        footer={null}
                    >
                        <Skeleton active loading={load.isFirst} paragraph={{ rows: 10 }}>
                            <Table dataSource={orderSonTable} columns={columns_orderSon} bordered pagination={false} loading={load.sonLoading}
                                style={{ marginTop: "5px" }}
                                scroll={{
                                    y: 500
                                }}
                            />
                        </Skeleton>



                    </Modal>
                    {/* 详情模态框 */}

                </div>


            </Skeleton>

        </div>
    )
}


export default MerechantDetail